body{
    background-color: rgb(245,245, 245);
}
/* header 区域 */
.top-nav {
    width: 100%;
    background-color: rgb(51, 51, 51);
  }
  .top-nav a {
    display: inline-block;
    padding: 14px 5px;
    color: rgb(176, 176, 176);
  }
  .top-nav a:hover {
    color: #fff;
  }
  .top-nav a.car {
    background-color: rgb(66, 66, 66);
    padding: 14px 25px;
    position: relative;
  }
  .top-nav a.car:hover {
    background-color: #fff;
    color: rgb(255, 103, 0);
  }
  .top-nav a.car span {
    font-size: 12px;
  }
  .top-nav a.car .car-content {
    position: absolute;
    right: 0;
    top: 100%;
    width: 300px;
    height: 100px;
    background-color: #fff;
    text-align: center;
    line-height: 100px;
    box-shadow: darkgrey 0px 0px 3px;
    display: none;
    z-index: 99;
  }
  /* 导航区域 */
  nav {
    position: relative;
    background-color: rgb(255, 255, 255)
  }
  .logo {
    margin-top: 20px;
    margin-right: 100px;
  }
  .main-nav {

  }
  .main-nav li {
    float: left;
  }
  .main-nav li a {
    font-size: 16px;
    display: block;
    padding: 39px 12px;
    color: black;
  }
  .main-nav li a:hover {
    color: rgb(255, 103, 0);
  }
  .search {
    position: relative;
    height: 50px;
    width: 300px;
    border: 1px solid #dddddd;
    margin-top: 25px;
  }
  .search input {
    height: 48px;
    width: 248px;
    padding-left: 30px;
    border-right: 1px solid #dddddd;
  }
  .search i {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0;
    top: -1px;
    text-align: center;
    line-height: 50px;
    transition: all 0.3s;
  }
  .search i:hover {
    background-color: rgb(255, 103, 0);
  }
  nav .nav-content {
    width: 100%;
    border-top: 1px solid #dddddd;
    display: none;
    height: 150px;
    position: absolute;
    z-index: 101;
    top: 100%;
    box-shadow: 0 0 3px #dddddd;
    background-color: #ffffff;
  }
  nav .nav-content .w {
    left: 50%;
    top: 0%;
    position: absolute;
    transform: translateX(-50%);
    z-index: 99;
  }
  nav .nav-content .w ul {
    display: none;
  }
  nav .nav-content .w li {
    float: left;
    width: calc(100% / 6);
    text-align: center;
    padding: 40px 0;
    border-right: 1px solid #eeeeee;
    margin-top: 20px;
  }
  nav .nav-content .w li:last-child {
    border: 0;
  }
  
  /* banner */
  .banner{
      width: 100%;
  }
  .banner .w{
    overflow: hidden;
  }
  .banner .breadcrumbs{
      height: 40px;
      line-height: 40px;
  }
  .banner .breadcrumbs a{
      color: #000000;
      transition: all .2s;
  }
  .banner .breadcrumbs a:hover{
      color: rgb(239,91,0);
  }
  .banner .swiper-container{
      position: relative;
  }
  /* service */
  .service{
    width: 100%;
  }
  .service .title{
      margin-top: 10px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      font-size: 24px;

  }
  
  .service .serviceList{
    width: 100%;
    /* background-color: red; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

  }
  .service .serviceList .serviceItem{
      margin-bottom: 20px;
      height: 277px;
      background-color: #ffffff;
      flex-basis: 24.5%;
      text-align: center;
      transition: all .4s;
      overflow: hidden;
      /* margin-right: 10px; */
  }
  .service .serviceList .serviceItem:hover{
    transform: translateY(-8px);
    box-shadow: 3px 5px 5px #eeeeee;
  }
  .service .serviceList .serviceItem:nth-of-type(n+5){
      /* background-color: orange; */
      margin-bottom: 0;
  }
  .service .serviceList .serviceItem img{
    margin-top: 70px;
  }
  .service .serviceList .serviceItem a {
    display: block;
    color: #000000;
  }
  .service .serviceList .serviceItem a:hover{
    color: rgb(239,91,0);
  }
  .service .serviceList .serviceItem a > .heading{
    font-size: 20px;
    padding: 20px 0;
    font-weight: bold;
  }
  .service .serviceList .serviceItem a > span{
    font-size: 14px;
  }
  /*  support*/
  .support{
    width: 100%;
  }
  .support .title{
      margin-top: 10px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      font-size: 24px;

  }
  
  .support .supportList{
    width: 100%;
    /* background-color: red; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

  }
  .support .supportList .supportItem{
      margin-bottom: 20px;
      height: 277px;
      background-color: #ffffff;
      flex-basis: 24.5%;
      text-align: center;
      transition: all .4s;
      overflow: hidden;
      /* margin-right: 10px; */
  }
  .support .supportList .supportItem:hover{
    transform: translateY(-8px);
    box-shadow: 3px 5px 5px #eeeeee;
  }
  .support .supportList .supportItem:nth-of-type(n+5){
      /* background-color: orange; */
      margin-bottom: 0;
  }
  .support .supportList .supportItem img{
    margin-top: 15px;
  }
  .support .supportList .supportItem a {
    display: block;
    color: #000000;
  }
  .support .supportList .supportItem a:hover{
    color: rgb(239,91,0);
  }
  .support .supportList .supportItem a > .heading{
    font-size: 16px;
    padding: 20px 0;
    /* font-weight: bold; */
  }
  /* serveCenter */
  .serveCenter{
    width: 100%;
  }
  .serveCenter .title{
    /* padding: 50px 0; */
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 24px;
    margin-top: 10px;
  }
  .serveCenter .wrap{
    width: 100%;
    height: 360px;
    /* background-color: red; */
  }
  .serveCenter .wrap .left,.serveCenter .wrap .right{
    float: left;
    width: 50%;
    overflow: hidden;
    height: 100%;
  }
  .serveCenter .wrap .right{
    text-align: center;
    background-color: #ffffff;
  }
  .serveCenter .wrap .right .rightTitle{
    font-size: 24px;
    padding: 30px 0;
    font-weight: bold;
  }
  .serveCenter .wrap .right .purpose{
    font-size: 14px;
  }
  .serveCenter .wrap .right .icons{
    display: flex;
    width: 100%;
    margin-top: 30px;
    padding: 0 20px;
  }
  .serveCenter .wrap .right .icons .iconItem{
    flex-basis: 20%;
    height: 90px;
    /* background-color: red; */
    padding: 20px 0;
    /* font-size: 16px; */
  }
  .serveCenter .wrap .right .icons .iconItem i{
    font-size: 24px;
  }
  .serveCenter .wrap .right .icons .iconItem p{
    margin-top: 15px;
    font-size: 14px;
  }
  .serveCenter .wrap .right a.gridChek{
    font-size: 14px;
    margin-top: 50px;
    display: block;
    color: #aaaaaa;
    transition: all .4s;
  }
  .serveCenter .wrap .right a.gridChek:hover{
    color: rgb(239,91,0);    
  }
.problem{
  width: 100%;
}
.problem .title{
   margin-top: 10px;
   height: 100px;
   line-height: 100px;
   text-align: center;
   font-size: 24px;
}
.problem .problemSearch{
  width: 600px;
  height: 50px;
  margin: 0 auto;
  position: relative;
}
.problem .problemSearch input{
  width: 100%;
  height: 100%;
  font-size: 14px;
  padding-left: 20px;
}
.problem .problemSearch i{
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  transition: all .2s;
}
.problem .problemSearch i:hover{
  background-color: rgb(239,91,0); 
}
.problem .titleList{
  width: 100%;
  height: 67px;
  display: flex;
  margin-top: 65px;
  border-bottom: 1px solid #cccccc;
}

.problem .titleList .titleItem{
  flex: 1;
  line-height: 67px;
  text-align: center;
  transition: all .4s;
  background-color: #fff;
  font-size: 14px;
}
.problem .titleList .titleItem:hover{
  cursor: pointer;
}
.problem .titleList .titleItem.active{
  background-color: rgb(239,91,0); 
}
.problem .problemsBox{
  width: 100%;
  padding-top: 20px;
  background-color: #ffffff;
  /* background-color: red; */
}
.problem .problemsBox .problemsPanel{
  width: 100%;
  display: none;
}
.problem .problemsBox .problemsPanel.active{
  display: block;
}
.problem .problemsBox .problemsPanel a{
  width: 45%;
  display: inline-block;
  padding-left: 100px;
  height: 40px;
  line-height: 40px;
  color: #000000;
  font-size: 14px;
  transition: all .4s;
}
.problem .problemsBox .problemsPanel a:hover{
  color: rgb(239,91,0); 
}
/* 脚注区域 */
#footer {
  width: 100%;
  background-color: #fff;
  margin-top: 50px;
}
#footer .fuwu {
  width: 100%;
}
#footer .fuwu ul {
  padding: 30px;
  /* border-bottom: 1px solid #cccccc; */
  text-align: center;
  font-size: 14px;
}
#footer .fuwu ul li {
  width: calc(100% / 5);
  float: left;
  border-right: 1px solid #cccccc;
}
#footer .fuwu ul li:last-child {
  border: 0;
}
#footer .fuwu ul li a {
  transition: all 0.4s;
  color: #000;
}
#footer .fuwu ul li a:hover {
  color: rgb(255, 103, 0);
}
#footer .fuwu .logo {
  width: 100%;
  text-align: center;
  margin-top: 100px;
}
#footer .fuwu .logo p {
  font-size: 14px;
  padding: 80px;
}